<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-04-15 14:41:06
 * @LastEditors: 花香蝶自来 1026583651@qq.com
 * @LastEditTime: 2024-05-27 21:22:16
 * @FilePath: \crm\pages\calendar\calendar.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <view>
    <view style="background-color: #fff; padding: 20rpx; padding-bottom: 0">
      <u-calendar-index @change="change"></u-calendar-index>
    </view>
    <view class="nolist" v-if="list.length == 0">
      <u--image :src="$z.imgsrc('no-data.png')" width="300rpx" height="300rpx"></u--image>
      <view class="text">今天还没有日程安排哦～</view>
    </view>
    <view>
      <view class="list" v-for="(item, index) in list">
        <view class="moon" v-if="item.moon">
          {{ item.moon }}
        </view>
        <view class="item" v-else>
          <view class="l">
            <view class="day">{{ item.day }}</view>
            <view class="week">{{ item.week }}</view>
          </view>
          <view class="r">
            <view class="content">
              <view class="text">{{ item.text }}</view>
              <view class="t">{{ item.t }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view style="height: 100rpx"></view>
  </view>
</template>

<script>
import { getCalendarList } from '@/apis/customer'
import dayjs from "@/uni_modules/uview-ui/libs/util/dayjs.js";
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    // this.getSchedule()
  },
  methods: {
    // 获取日程
    // 获取日程
    async change(list) {

      this.list = list.map(item => {
        return {
          day: dayjs(item.startTime).format('DD'),
          week: dayjs(item.startTime).format('MM'),
          text: item.name,
          t: item.startTime,
        }
      })
    }

  },
};
</script>
<style>
page {
  background: #f2f4f5;
}
</style>
<style lang="scss" scoped>
.nolist {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #a9a9a9;
  padding: 200rpx 0;
}

.list {
  .moon {
    color: #171a1d;
    font-size: 40rpx;
    font-weight: bold;
    padding-left: 24rpx;
  }

  .item {
    padding-right: 24rpx;
    display: flex;
    margin: 18rpx 0;

    .l {
      width: 100rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .day {
        font-size: 36rpx;
        color: #171a1d;
        font-weight: bold;
        line-height: 50rpx;
      }

      .week {
        color: #838589;
        font-size: 24rpx;
        line-height: 32rpx;
      }
    }

    .r {
      flex: 1;
      background-color: #ffffff;
      padding: 16rpx;
      border-radius: 16rpx;

      .content {
        background: linear-gradient(to right, #f7f8f8, #ffffff);
        height: 120rpx;
        display: flex;

        flex-direction: column;
        justify-content: space-around;
        padding: 16rpx 0;
        padding-left: 30rpx;
        border-left: 6rpx solid $color-red1;

        .text {
          color: rgba(8, 13, 31, 1);
          font-size: 28rpx;
        }

        .t {
          color: rgba(131, 133, 137, 1);
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>
